<template>
  <div class="balance">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">地址列表</div>
    </div>

    <div class="di_zi" v-for="(item,index) in arr" :key="index">
      <router-link :to="{name:'Balance',params:{num:item.num}}">
        <div class="dizi_btn">
          <span class="iconfont icon-gou"></span>
        </div>
        <div class="dz_xx">
          <span>{{item.dizi.name}} {{item.dizi.phone}}</span>
          <div>
            <span v-if="item.dizi.flag">[默认]</span>
            <span>{{item.dizi.city}}{{item.dizi.dizi}}</span>
          </div>
        </div>
      </router-link>
      <router-link :to="{name:'Creatdizi',params:{id:'2',num:item.num}}"> 编辑 </router-link>
    </div>

    <router-link :to="{name:'Creatdizi',params:{id:'1'}}" class="xin_zeng">
        +&nbsp;  新增地址
    </router-link>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr:[],
      id:localStorage.getItem("id")
    }
  },
  methods:{
    fanHui(){
      window.history.go(-1)
    },
  },
  mounted(){
    this.$axios.get("http://47.114.130.21:3000/dizijm",{params:{id:this.id}}).then((data)=>{
      if(data.data.code==200){
        this.arr=data.data.msg;
      }
    })
  }
};
</script>

<style lang="less" scoped>
.balance {
  >:nth-child(2){
    margin-top: 45px;
  }
  .di_zi {
    border-bottom: 1px solid #eeeeee;
    align-items: center;
    background: #ffffff;
    display: flex;
    padding: 0.533333rem 0.266667rem;
    font-size: 14px;
    height: 2.213333rem;
    flex: 1;
    a {
      display: flex;
      align-items: center;
      width: 90%;
      .dizi_btn {
          margin-right: 0.133333rem;
        height: 100%;
        span {
          color: #FF7100;
          font-size: 28px;
        }
      }
      .dz_xx {
        display: flex;
        flex-flow: column;
        
        > span {
          color: #666666;
          font-weight: 800;
        }
        >div{
          >:first-child{
            color: #FF7100;
          }
          > :last-child {
          margin-top: 0.133333rem;
          color: #999999;
          }
        };
      }
    }
    > :last-child {
      color: #999999;
      text-align: center;
      line-height: 1.146667rem;
      display: block;
      width: 10%;
      height: 100%;
    }
  }
  .xin_zeng{
    display: block;
    text-align: center;
    padding: 0.4rem 0px;
    font-size: 14px;
    color: #000000;
  }
}
</style>